<template>
	<div class="wrap">
      <v-carousel :list="list" :wpTitle="carTitle"></v-carousel>
      <div class="content">
         <div class="head">
            <p>{{article_con.title}}</p>
            <span>来源: {{article_con.author}}</span>
            <span>发布时间: {{article_con.date}}</span> 
            <span>{{article_con.hits}} 次浏览</span>
         </div>
         <div class="info" v-html="article_con.content"></div>
      </div>
	</div>
</template>

<script>
import vCarousel from './components/carousel'
export default {
	data() {
   	return {
		   id: 0,
         list: [],
         carTitle: 'article',
         c: '',
         article_con: {},
         tabList: [],
         tabs: true
   	}
	},
   computed: {
      getData (){

         if (this.c) {

            let _this = this;

            // ajax获取数据
            this.ajax('?c=list&cs='+this.c+'&wxapp_skin=', function (res){
               _this.tabList = res.data.data3;
               _this.carTitle = res.data.data4.cate_name;

               if (res.data.data[_this.id]) {
                  _this.article_con = res.data.data[_this.id];
               }else{
                  console.log('内容不存在！');
                  _this.$router.push('/list_article');
               }

               if (_this.tabList.length <= 3) {
                  _this.tabs = true;
               }else{
                  _this.tabs = false;
               }
            });

         }
      }
   },
   mounted (){
      this.id = this.$route.query.id-1;    // 内容id
      this.c = this.$route.query.c;        // 分类标识
      this.list = this.$store.getters.getCar;//从仓库取取轮播图
      this.getData;
   },
   watch: {             //监听路由切换
      $route() {
         this.list = this.$store.getters.getCar;  
         this.id = this.$route.query.id-1;
         this.c = this.$route.query.c;
         this.getData;
      }
   },
   components: {
      vCarousel
   }
}

</script>

<style scoped>
   .content{
      padding:0 .1rem; overflow:hidden;
   }
   .content .head{
      text-align:center; margin:.2rem auto;
   }
   .content .head p{
      font-size:.18rem; margin:0 0 .1rem;
   }
   .content .head span{
      margin:0 .04rem;
   }
   .content .info{
      text-indent:2em; margin:.1rem auto .2rem;
   }
</style>